<template>
  <div>
    <div class="main_layout">
      <div class="left_menu" v-if="menu.length > 0">
        <!-- <ul>
          <p v-for="(item, index) in menu" :key="index"><router-link :to="'/' + name + '/' + item.name" >{{ item.label }}</router-link></p>
        </ul> -->
          <!-- :unique-opened="true" -->
        <!-- <el-menu
          :router="true"
          :unique-opened="true"
          class="el-menu-vertical-demo"
          text-color="#fff"
          :default-active="'/' + name + '/list'">
          <template v-for="(item, key) in menu">
            <template v-if="item.children">
              <el-submenu :index="item.name" :key="key">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>{{item.label}}</span>
                </template>
                <template v-for="(itemTwo, next) in item.children">
                  <el-menu-item-group :key="next">
                    <el-menu-item :index="itemTwo.name">{{itemTwo.label}}</el-menu-item>
                  </el-menu-item-group>
                  <template v-if="itemTwo.children">
                      <el-submenu :index="itemTwo.name" v-for="(itemThree, other) in itemTwo.chilfren" :key="other">
                      <template slot="title">{{itemTwo.label}}</template>
                      <el-menu-item :index="itemThree.name">{{itemThree.label}}</el-menu-item>
                    </el-submenu>
                  </template>
                </template>
              </el-submenu>
            </template>
            <template v-else>
              <el-menu-item :index="item.name" :key="key">
                <i class="el-icon-menu"></i>
                <span slot="title">{{ item.label }}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu> -->
        <el-menu
          :router="true"
          :unique-opened="true"
          class="el-menu-vertical-demo"
          text-color="#fff"
          :default-active="'/' + name + '/list'">
          <template v-for="(item, key) in menu">
            <template v-if="item.children">
              <el-submenu :index="item.name" :key="key">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>{{item.label}}</span>
                </template>
                <el-menu-item-group v-for="(itemTwo, next) in item.children" :key="next">
                  <el-menu-item :index="itemTwo.name">{{itemTwo.label}}</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </template>
            <template v-else>
              <el-menu-item :index="item.name" :key="key">
                <i class="el-icon-menu"></i>
                <span slot="title">{{ item.label }}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
      </div>
      <div class="right_contain" :style="{'width': menu.length > 0 ? 'calc(100% - 170px)' : '100%'}">
        <router-view class="router_view"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Layout',
  props: {
    name: String
  },
  data() {
    return {
      activeBtn:  0,
      // 测试使用：具体的使用 mapGetter 到 vuex 中获取
      newMenus: [],
      // test: [
      //   {
      //     name: 'mimi',
      //     subs:[
      //       {
      //         name: 'assets',
      //         label: '资产管理',
      //         children: [
      //           { name: '/mimi/list', label: 'U盘资产' },
      //           { name: '/mimi/assets/terminalList', label: '终端资产' },
      //           { name: '/mimi/assets/printerList', label: '打印机资产' },
      //           { name: '/mimi/assets/burnerList', label: '刻录机资产' },
      //         ]
      //       },
      //       {
      //         name: 'person',
      //         label: '人员管理',
      //         children: [
      //           { name: '/mimi/person/personList', label: '人员信息' },
      //         ]
      //       },
      //     ]
      //   },
      //   {
      //     name: 'alarm',
      //     subs: [
      //       {
      //         name: 'alarm',
      //         label: '用户行为告警',
      //         children: [
      //           {
      //             name: '/alarm/list',
      //             label: 'U盘使用告警',
      //           },
      //           {
      //             name: '/alarm/userAlarm/terminalAlarm',
      //             label: '终端使用告警',
      //           },
      //         ]
      //       }
      //     ]
      //   },
      //   {
      //     name: 'status',
      //     subs: [
      //       {
      //         name: 'storage',
      //         label: '存储介质',
      //         children: [
      //           {
      //             name: '/status/list',
      //             label: 'U盘状态',
      //           },
      //         ]
      //       },
      //       {
      //         name: '/status/terminal/list',
      //         label: '终端状态',
      //         // children: [
      //         //   { name: '/status/terminal/list', label: '基础状态' },
      //         // ]
      //       },
      //     ]
      //   },
      //   {
      //     name: 'userBehavior',
      //     subs: [
      //       {
      //         name: 'user',
      //         label: '用户行为',
      //         children: [
      //           {
      //             name: '/userBehavior/list',
      //             label: '用户行为',
      //           },
      //         ]
      //       }
      //     ]
      //   },
      //   {
      //     name: 'config',
      //     subs: [
      //       {
      //         name: '/config/list',
      //         label: '终端进程白名单',
      //       }
      //     ]
      //   },
      //   {
      //     name: 'system',
      //     subs: [
      //       {
      //         name: '/system/list',
      //         label: '菜单管理',
      //       },
      //       {
      //         name: '/system/role',
      //         label: '角色管理',
      //       }
      //     ]
      //   }
      // ],
      // test: [
      //   {
      //     name: 'mimi',
      //     subs:[
      //       {
      //         name: 'mimi',
      //         label: '资产管理',
      //         children: [
      //           { name: '/mimi/list', label: 'U盘信息' },
      //           // { name: '/mimi/terminal', label: '终端信息' },
      //           { name: '/mimi/terminalOther', label: '终端信息' },
      //         ]
      //       },
      //       {
      //         name: 'secretPerson',
      //         label: '人员管理',
      //         children: [
      //           { name: '/secretPerson/list', label: '人员信息' },
      //         ]
      //       },
      //     ]
      //   },
      //   {
      //     name: 'alarm',
      //     subs: [
      //       {
      //         name: 'alarm',
      //         label: '用户行为告警',
      //         children: [
      //           {
      //             name: '/alarm/list',
      //             label: 'U盘使用告警',
      //           },
      //         ]
      //       }
      //     ]
      //   }
      // ],
      final_routes: [
        {
          name: 'mimi',
          label: '涉密信息',
          children: [
            { name: 'list', label: '存储设备' },
            { name: 'terminal', label: '终端信息' },
          ]
        },
        {
          name: 'secretPerson',
          label: '涉密人员',
          children: [
            { name: 'list', label: '基本信息' },
          ]
        },
        {
          name: 'system',
          children: [
            { name: 'list', label: '系统列表' },
            { name: 'add', label: '系统新增' }
          ]
        },
      ],
      menu: []
    }
  },
  computed: {
  },
  created() {
    this.getMenus()
  },
  methods: {
    // 获取动态菜单（后期需改成接口直接从后台调用接口获取菜单，如果从 vuex 中获取的， vuex 页面刷新之后就不存在了）
    getMenus() {
      // 发送获取用户信息请求
      this.$axios({
        url: '/getUserInfo',
        method: 'post',
        data: window.sessionStorage.getItem('uname')
      }).then(res => {
        const { code, data } = res.data
        if (code !== 200) {
          console.log('request failed!')
        } else {
          const { uroutes } = data.user
          // 将 uroutes 转换为我们需要的菜单格式
          const menus = uroutes
          // console.log(menus)
          // 待修改：根据 hidden: false 来判断路由是否显示在菜单栏上
          menus.forEach(one => {
            const item = {}
            const oneChildren = []
            if (one.children) {
              one.children.forEach(two => {
                // hidden: false 表示显示在菜单上
                if (two.hidden === false) {
                  const itemTwo = {}
                  const twoChildren = []
                  itemTwo.label = two.label
                  if (two.children) {
                    two.children.forEach(three => {
                      if (three.hidden === false) {
                        twoChildren.push({
                          name: one.path + '/' + three.path,
                          label: three.label
                        })
                        itemTwo.name = two.component
                        itemTwo.children = twoChildren
                      }
                    })
                  } else {
                    itemTwo.name = one.path + '/' + two.path
                  }
                  oneChildren.push(itemTwo)
                }
              })
              item.name = one.path.split('/')[1]
              item.subs = oneChildren
            }
            this.newMenus.push(item)
          })
          // console.log(this.newMenus)
          // 根据 name 到 final_routes中匹配：匹配名称相等的，然后将子菜单拿到
          this.newMenus.forEach(item => {
            if (item.name == this.name) {
              this.menu = item.subs
            }
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    changeBg(key) {
      this.activeBtn = key
    },
  }
}
</script>

<style lang="scss">
.main_layout {
  display: flex;
  align-items: flex-start;
  height: 100%;
  .left_menu {
    width: 170px;
    height: 100%;
    background-color: #151c22;
    color: #fff;
    .active {
      background-color: #cc302e !important;
      color: #fff;
    }
  }
  .right_contain {
    height: 100%;
    box-sizing: border-box;
    padding: 15px 5px 15px 15px;
    background-color: #f9f9f9;
    // background-color: #f0f0f0;
    .router_view {
      width: 100%;
      height: 100%;
      padding: 0 10px 0 0;
      // background-color: #fff;
      box-sizing: border-box;
      overflow-x: hidden;
      overflow-y: auto;
      /* 内容区域显示部分滚动条 */
      &::-webkit-scrollbar{
        width: 5px;
        height: 5px;
      }
      &::-webkit-scrollbar-thumb{
        background-color: rgb(190, 190, 190);
        -webkit-border-radius:5px;
        border-radius: 5px;
        box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2) inset;
      }
      &::-webkit-scrollbar-thumb:vertical:hover{
        background-color: #999;
      }
      &::-webkit-scrollbar-thumb:vertical:active{
        background-color: rgb(190, 190, 190);
      }
      &::-webkit-scrollbar-button{
        display: none;
      }
      &::-webkit-scrollbar-track{
        background-color: #f1f1f1;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset;
        -webkit-border-radius:5px;
        border-radius: 5px;
      }
    }
  }
}
.el-menu {
  border-right: 0 !important;
  background-color: #151c22 !important;
}
.el-submenu .el-menu-item {
  min-width: 170px !important;
}
.el-submenu__title i {
  color: #fff !important;
}
.el-submenu__title:focus, .el-submenu__title:hover {
  background-color: #363c41 !important;
}
.el-menu-item:focus, .el-menu-item:hover {
  background-color: #363c41 !important;
}
.el-menu-item-group__title {
  padding: 0 !important;
}
.el-menu-item.is-active {
    color: #cc302e !important;
}
</style>